<template>
  <a-modal
    v-model:open="show"
    width="40%"
    centered
    :title="title"
    :footer="null"
    @cancel="handleCloseDialog"
  >
    <a-form
      ref="formRef"
      class="form"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="username" label="手机号码" name="username">
        <a-input
          :bordered="false"
          class="h-form-input"
          v-model:value="formState.username"
        />
      </a-form-item>
      <a-form-item ref="nickName" label="账号名称" name="nickName">
        <a-input
          :bordered="false"
          class="h-form-input"
          v-model:value="formState.nickName"
        />
      </a-form-item>
      <a-form-item ref="roleId" label="选择角色" name="roleId">
        <a-select
          ref="select"
          class="h-form-input"
          :bordered="false"
          v-model:value="formState.roleId"
          style="width: 100%"
        >
          <a-select-option
            v-for="item in roleList"
            :value="item.roleId"
            :key="item.roleId"
            :disabled="item.state != 1 ? true : false"
            >{{ item.roleName }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item ref="name" label="启用状态" name="state">
        <a-switch
          v-model:checked="formState.state"
          checked-children="启用"
          un-checked-children="禁用"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 9, span: 4 }">
        <div class="btns center">
          <a-space>
            <a-button @click="handleCloseDialog">取消</a-button>
            <a-button type="primary" @click="handleSubmit">确定保存</a-button>
          </a-space>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script setup>
import { reactive, ref, onMounted } from "vue";
import { editUser } from "@/api/system";
import { message } from "ant-design-vue";
const props = defineProps(["show", "title", "roleList", "dataList"]);
const { show, title, roleList, dataList } = props;
const formRef = ref();
const labelCol = {
  span: 3,
};
const wrapperCol = {
  span: 18,
};
let formState = ref({
  nickName: "",
  username: "",
  roleId: undefined,
  state: true,
});
const rules = {
  nickName: [
    {
      required: true,
      message: "请输入账号名称",
      trigger: "blur",
    },
  ],
  username: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
  ],
  roleId: [
    {
      required: true,
      message: "请选择角色",
      trigger: "change",
    },
  ],
  state: [
    {
      required: true,
      message: "请选择是否启用",
      trigger: "change",
    },
  ],
};
const emits = defineEmits(["handleSave", "handleCancel"]);
const handleSubmit = () => {
  formRef.value.validate().then(async (res) => {
    formState.value.state = formState.value.state ? 1 : 2;
    formState.value.roleId = [formState.value.roleId]
    editUser(formState.value).then((res) => {
      clearForm()
      emits("handleSave", true);
      message.info(res.msg);
    });
  })
};
const handleCloseDialog = () => {
  clearForm()
  emits("handleCancel", false);
};
const clearForm = () => {
  console.log('清空');
  formState.value = {
    nickName: "",
    username: "",
    roleId: undefined,
    state: false,
  }
  formRef.value.clearValidate()
  console.log('清空',formRef.value);
}
onMounted(() => {
  if (dataList && dataList.roleId) {
    formState.value = Object.assign(formState.value, dataList);
    formState.value.state == 1 ? formState.value.state = true : formState.value.state = false
    console.log('123',formState.value);
  }
});
</script>
<style scoped lang="less">
.form {
  margin-top: 24px;
}
.content {
  background: #f4f6f8;
  border-radius: 8px;
  margin-top: 20px;
  min-height: 200px;
  margin-bottom: 40px;
}
.h-form-input {
  background-color: #f3f5f7;
}
</style>
